<!DOCTYPE html>
<html>
<head>
	<title></title>
	<!-- <link rel="stylesheet" type="text/css" href="../../../Public/source/css/Login.css"> -->
	<link rel="stylesheet" type="text/css" href="../../../Public/source/css/Login.css">
	<style>
	   .all_container p{
		   display: block;
		   height: 5px;
		   font-size: 10px;
	   }
	</style>
</head>
<body>
	<div class="all_container">
		<div class="head_context" style="height: 500px;width: 610px;">
			<div class="head">
				<div class="french">
					<p style="font-size: 22px;"><b>PLEASE LOGIN</b></p>
				</div>
			
				<div class="partone">
					<img src="../../../Public/source/img/user.png">
					<input type="text" name="username" id="username" placeholder="请输入学号" onblur="check1()" autofocus>
					<p id="tip1" style="color: #18BC9C;"></p>
				</div>
				<div class="parttwo">
					 <img src="../../../Public/source/img/psd.png">
					 <input type="password" name="psd" id="psd" placeholder="请输入密码" onblur="check2()">
					 <p id="tip2" style="color: #18BC9C;"></p>
				</div>

				<div class="partthree">
					<input type="text" name="lockcode" id="lockcode" placeholder="请输入验证码" onblur="check3()" style="position: relative;left:180px;">
					<img src="__URL__/verifyImg" onclick="this.src='__URL__/verifyImg/'+Math.random()" alt="" / style="position: relative;left: 190px;">
					<p id="tip3" style="color: #18BC9C;"></p>
				</div>
				<button class="button1" id="login">登陆</a></button>
				<button class="button2" onclick="window.location.href='register.html'">去注册</button>
			</div>
		</div>
	</div>
</body>

<script src="http://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
		<script>
			function check1() {
				var u = document.getElementById("username");
				var t = document.getElementById("tip1");
				var reg = /^[a-zA-Z]$/;
				if( u==null || u.value.length==0 ){
					t.innerHTML = " 用户名不能为空";
				}
				else{
					t.innerHTML = '';
				}
			}
			function check2() {
				var u = document.getElementById("psd");
				var t = document.getElementById("tip2");
				var reg = /^[a-zA-Z]$/;
				if( u==null || u.value.length==0 ){
					t.innerHTML = " 密码不能为空";
				}
				else{
					t.innerHTML = '';
				}
			}
			function check3() {
				var u = document.getElementById("lockcode");
				var t = document.getElementById("tip3");
				var reg = /^[a-zA-Z]$/;
				if( u==null || u.value.length==0 ){
					t.innerHTML = " 验证码不能为空";
				}
				else{
					t.innerHTML = '';
				}
			}
			function check(){
				var u = document.getElementById("username");
				var v = document.getElementById("password");
				var w = document.getElementById("lockcode");
				if( u==null || u.value.length==0 ||w==null || w.value.length==0){
					alert("请检查信息是否填写完整!");
					return false;
				}
				else
				    return true;
			}
		</script>
		
<script type="text/javascript" src="../../../Public/source/jquery-3.2.1.js"></script>
<script type="text/javascript">
	$(document).ready(function(){
		$('#login').click(function(){
			var username = $('#username').val();
			var psd = $('#psd').val();
			var lockcode=$('#lockcode').val();
			$.ajax({
				type:"post",
				url:"{:U('User/login')}",//后台提供接口
				data:{
					password:psd,
					num:username,
					checkcode:lockcode
				},
				dataType:"json",
				success:function(data){
					if(data.status == 1)
					{
						alert('登陆成功');
						window.location.href ="{:U('User/showSelf')}";
					}
					else
					{
						alert(data.info);
						window.location.reload();
					}
				},
				error:function(){
					console.log("error");
				}
			});
		});
	});
</script>
</html>
